import React from 'react';
import styled from 'styled-components';
import { Badge, Image } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';

const Container = styled.div`
  & {
    .sort {
      display: flex;
      justify-content: space-between;
      padding: 20px 32px;
      background: #fff;
      .adm-badge-wrap {
        width: 48px;
        height: 48px;
      }
      .sort-title {
        color: #666;
        font-size: 12px;
      }
    }
  }
`

const sorts = [
  {path: './study',title: '学习技术', tip: '火热', src: require('@/static/me/icon/bianqian.png')},
  {path: '',title: '实用工具', tip: '12', src: require('@/static/me/icon/jisuanqi.png')},
  {path: '',title: '活动需求', tip: 'more', src: require('@/static/me/icon/zhuti.png')},
  {path: '/news',title: '文章资讯', tip:'99+', src: require('@/static/me/icon/xiaoxi.png')},
]

// const toPage = (param) => {
//   console.log('param: ', param);
//   if (param && param.path) {
//     navigate(param.path)
//   }
// }

// 分类
const sortItem = () => {
  // useNavigate必须在函数组件内部使用,自定义方法也不行
  const navigate = useNavigate()
  return sorts.map((e, index) => (
    <div  key={index} onClick={() => navigate(e.path)}>
      <Badge content={e.tip}>
        <Image src={e.src} fit='contain' />
        <span className="sort-title">{e.title}</span>
      </Badge>
    </div>
  ))
}


const Cates = () => {
  return (
    <Container>
      <div className="sort">
        {sortItem()}
      </div>
    </Container>
  );
}

export default Cates;
